<template>
  <div>
    <el-row :gutter="20">
      <!-- <el-col :span="12" :offset="0"></el-col> -->
      <el-col :span="10" :offset="7" class="login_col">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="登录" name="login"><Login /></el-tab-pane>
          <el-tab-pane label="注册" name="register"><Register /></el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Login from "./logins.vue";
import Register from "./register.vue";
export default {
  components: { Login, Register },
  data() {
    return {
      activeName: "login",
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name == "login") {
        this.$router.push("/login");
      } else {
        this.$router.push("/login?register=register");
      }
    },
  },
  mounted() {},
  watch: {
    $route: {
      handler() {
        if (this.$route.query.register) {
          this.activeName = "register";
        } else {
          this.activeName = "login";
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="stylus" >
.login_col {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 0 !important;
  margin-top: 22px;
  background: #fff;
  border-radius: 10px;
}
</style>